<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.5.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.5.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.5.5/demo/demo.css">    
    <script type="text/javascript" src="jquery-easyui-1.5.5.5/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.5.5.5/jquery.easyui.min.js"></script>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true">
        
        <div data-options="region:'west',split:true" title="West" style="width:150px;">
        <div class="easyui-accordion" data-options="fit:true">
                <div title="基础模块" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
                    
                    <ul class="easyui-tree">
                        <li id="./pages/user.html">用户管理</li>
                        <li id="./pages/news.html">新闻管理</li>
                        <li id="./pages/cate.html">分类管理</li>
                        <li id="./pages/product.html">产品管理</li>
                    </ul>
                </div>
                <div title="订单相关" data-options="iconCls:'icon-help'" style="padding:10px;">
                    <ul class="easyui-datalist">
                        <li>订单管理</li>
                        <li>物流管理</li>
                        <li>等级管理</li>
                        <li>购物车管理</li>
                    </ul>
                </div>
            </div>
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <div id="tt" class="easyui-tabs" data-options="fit:true"></div>
        </div>
    </div>
    <script type="text/javascript">
        $(".easyui-tree").tree({
            onClick: function (node) {
                addPanel(node.text, node.id);
            }
        });
        function addPanel(title, url) {
            //判断选项卡是否重复打开
            if ($('#tt').tabs('exists', title)) {
                $('#tt').tabs('select', title);//选中并刷新
            } else {
                $("#tt").tabs("add", {
                    title: title,
                    content: '<iframe style="height:100%;width:100%" frameborder="0" src=' + url + '>',
                    closable: true
                });
            }  
        }
    </script>
</body>
</html>
